<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
     table{
  width: 400px;
  height: 200px;
  /* border: 1px solid #000; */
}
tr{
  border: 1px solid #000;
}
td{
  border: 1px solid #000;
}
img{
  width: 200px;
  height: 200px;
}
p{
  text-align: center;
}
  </style>
</head>
<body>
    <table>
        <tr>
          <td><img src="./imgs/2.jpg" alt=""><p id="colorid" onclick="setcolor()">这是一条爱揍人的狗</p></td>
          <td><img src="./imgs/1.jpg" alt=""><p id="colorids" onclick="setcolors()">这是一条爱揍人的狗</p></td>
        </tr> 
      </table> 
    <!-- <div id="colorid">这是第一行文字</div>
    <p onclick="setcolor()">改变字体颜色</p> -->
    
</body>
</html> 
<script>
       var i=1;
       function setcolor(){
            i++;
            if(i%2==0){
                document.getElementById('colorid').style.background="blue"
            }else{
                document.getElementById('colorid').style.background="#fff"
            }
        }
        function setcolors(){
            i++;
            if(i%2==0){
                document.getElementById('colorids').style.background="pink"
            }else{
                document.getElementById('colorids').style.background="#fff"
            }
        }
</script>
